const { animate, beforeEnter, enter, afterEnter, removeTodo } = useAnimation();

function useAnimation() {
  let animate = reactive({
    show: false,
    el: null,
  });

  const dustbin = {
    el: null,
    pos: [],
    init(queryStr) {
      this.el = document.querySelector(queryStr);
      this.getPos();
    },
    getPos() {
      const { left, top } = this.el.getBoundingClientRect();
      this.pos[0] = left;
      this.pos[1] = top;
    },
  };

  function beforeEnter(el) {
    let dom = animate.el;
    let rect = dom.getBoundingClientRect();
    const aniEl = document.querySelector('.animate');
    //动画元素 调整到dustbin的位置,也可以css直接写精准位置
    aniEl.style.left = `${dustbin.pos[0]}px`;
    aniEl.style.top = `${dustbin.pos[1]}px`;
    //计算并赋值偏移量
    let dx = dustbin.pos[0] - rect.left;
    let dy = dustbin.pos[1] - rect.top;
    el.style.transform = `translate(-${dx}px, ${dy * -1}px)`;
  }

  function enter(el, done) {
    document.body.offsetHeight;
    el.style.transform = `translate(0,0)`;
    el.addEventListener('transitionend', done);
  }

  function afterEnter(el) {
    animate.show = false;
    el.style.display = 'none';
  }

  function removeTodo(e, i) {
    animate.el = e.target;
    animate.show = true;
    todos.value.splice(i, 1);
    dustbin.init('.dustbin');
  }
  
  return { animate, beforeEnter, enter, afterEnter, removeTodo };
}
